<template>
  <div class="leftMenu_box" :style="`top:${top};transition:all .3s ease-in`">
    <div class="leftMenu sq_xl">
      <ul class="s_flex s_flex-column s_justify_content_center">
        <li
          class="sq_content sq_tilte_color s_flex"
          v-for="(item, index) in menu"
          :key="index"
          @click="checkItem(index, item)"
          :class="check == index ? 'sq_active' : ''"
        >
          <span class="iconfont icon-jiantou" v-if="check == index"></span>
          <label v-else style="width: 12px"></label>
          <i> {{ item.name }}</i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["menu", "check"],
  data() {
    return {
      top:""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    checkItem(index, item) {
      this.$emit("checkItem", index);
      if (item.path) {
        this.$router.push(item.path);
      }
    },
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        // console.log(scrollTop);
        if(scrollTop>=300){
          this.top = "110px"
        }else{
          this.top = ""
        }
    },
  },
};
</script>

<style lang="less" scoped>
.leftMenu_box {
  position: fixed;
  z-index: 10;
}
.leftMenu {
  width: 213px;
  // height: 155px;
  padding: 20px 0;
  background: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(97, 97, 102, 0.23);
  position: relative;
  ul {
    width: 100%;
    height: 100%;
    text-align: center;
    li {
      margin-top: 28px;
      padding: 0 15px;
      cursor: pointer;
      &:first-child {
        margin-top: 0px;
      }
      i {
        margin-left: 15px;
        display: inline-block;
      }
      // span {
      //   width: 0;
      //   height: 0;
      //   // border-width: 8px;
      //   border-top: 8px solid transparent;
      //   border-bottom: 8px solid transparent;
      //   border-left: 8px solid var(--color);
      //   // border-color: var(--color) transparent transparent transparent;
      //   vertical-align: middle;
      // }
      .icon-jiantou {
        font-size: 12px !important;
      }
    }
  }
}
</style>